<!-- 编辑器的右侧菜单 -->

<template>
  <div class="Component-list pt15 pd " v-if="obj.typeid || obj.typeid == 0">
    <div v-if="obj.typeid == 0 || obj.typeid == 1">
      <p class="title-label b">字体设置
        <n-checkbox v-model:checked="obj.isBlod" class="ml20"> 是否加粗 </n-checkbox>
      </p>
      <div v-if="obj.typeid == 1" class="display-flex mt10 ">
        <span class="vertical-center">文本类型：</span>
        <div class="flex-1">
          <n-select v-model:value="obj.textType" :options="textTypeList" class="w100" />
        </div>
      </div>

      <div class="mt10">
        <p class="">字体大小：</p>
        <div class="display-flex mt5">
          <div class="flex-1 pt5">
            <n-slider v-model:value="obj.fontSize" :step="1" :min="12" :max="200" />
          </div>
          <div class="injhjwertrw ml10">
            <n-input-number v-model:value="obj.fontSize" size="small" />
          </div>
        </div>
      </div>

      <div class="mt10">
        <p class="">行高：</p>
        <div class="display-flex mt5">
          <div class="flex-1 pt5">
            <n-slider v-model:value="obj.lineHeight" :step="1" :min="18" :max="200" />
          </div>
          <div class="injhjwertrw ml10">
            <n-input-number v-model:value="obj.lineHeight" size="small" />
          </div>
        </div>
      </div>



      <div class="mt10 display-flex">
        <div class="flex-1 mr10">
          <p class="">字体颜色：</p>
          <div>
            <n-color-picker v-model:value="obj.colorVal" />
          </div>
        </div>

        <div class="flex-1 ml10">
          <p class="">背景颜色：</p>
          <div>
            <n-color-picker v-model:value="obj.backgroundColor" />
          </div>
        </div>
      </div>

      <div class="mt10">
        <p>宽度：</p>
        <div class="display-flex mt5">
          <div class="flex-1 pt5">
            <n-slider v-model:value="obj.w" :step="1" :min="0" :max="1200" />
          </div>
          <div class="injhjwertrw ml10">
            <n-input-number v-model:value="obj.w" size="small" />
          </div>
        </div>
      </div>
      <div class="mt10">
        <p>高度：</p>
        <div class="display-flex mt5">
          <div class="flex-1 pt5">
            <n-slider v-model:value="obj.h" :step="1" :min="0" :max="1920" />
          </div>
          <div class="injhjwertrw ml10">
            <n-input-number v-model:value="obj.h" size="small" />
          </div>
        </div>
      </div>
      <div class="mt10">
        <p>与顶部的距离：</p>
        <div class="display-flex mt5">
          <div class="flex-1 pt5">
            <n-slider v-model:value="obj.y" :step="1" :min="0" :max="1920" />
          </div>
          <div class="injhjwertrw ml10">
            <n-input-number v-model:value="obj.y" size="small" />
          </div>
        </div>
      </div>
      <div class="mt10">
        <p>与左边的距离：</p>
        <div class="display-flex mt5">
          <div class="flex-1 pt5">
            <n-slider v-model:value="obj.x" :step="1" :min="0" :max="1920" />
          </div>
          <div class="injhjwertrw ml10">
            <n-input-number v-model:value="obj.x" size="small" />
          </div>
        </div>
      </div>
      <div class="mt10">
        <p class="">内边距：</p>
        <div class="kjbsfsdrte">
          <div>
            <n-input v-model:value="obj.paddingT" placeholder="上" size="medium" />
          </div>
          <div>
            <n-input v-model:value="obj.paddingR" placeholder="右" size="medium" />
          </div>
          <div>
            <n-input v-model:value="obj.paddingB" placeholder="下" size="medium" />
          </div>
          <div>
            <n-input v-model:value="obj.paddingL" placeholder="左" size="medium" />
          </div>
        </div>
      </div>
      <div class="mt20 display-flex">
        <p class="">边框：</p>
        <n-checkbox-group v-model:value="obj.border" class="mt2">
          <n-space item-style="display: flex;">
            <n-checkbox value="1" label="上" />
            <n-checkbox value="2" label="下" />
            <n-checkbox value="3" label="左" />
            <n-checkbox value="4" label="右" />
          </n-space>
        </n-checkbox-group>

      </div>

      <div class="mt20" v-if="obj.typeid == 0">
        <p class="">标签内容：</p>
        <div>
          <n-input v-model:value="obj.val" placeholder="标签内容：" size="medium" />
        </div>
      </div>
      <!-- 
      <div class="mt20" v-if="obj.typeid == 1">
        <p class="">跳转地址：</p>
        <div>
          <n-input
            v-model:value="obj.href"
            placeholder="跳转链接"
            size="medium"
          />
        </div>
      </div> -->

      <div class="mt20 jhgbjserer cen">
        <n-tooltip trigger="hover">
          <template #trigger>
            <i class="iconfont dx-zuoduiqi fz20 sz" @click="obj.textAlign = 'left'"></i>
          </template>
          左对齐
        </n-tooltip>
        <n-tooltip trigger="hover">
          <template #trigger>
            <i class="iconfont dx-juzhongduiqi fz20 sz" @click="obj.textAlign = 'center'"></i>
          </template>
          居中
        </n-tooltip>
        <n-tooltip trigger="hover">
          <template #trigger>
            <i class="iconfont dx-youduiqi fz20 sz" @click="obj.textAlign = 'right'"></i>
          </template>
          右对齐
        </n-tooltip>
      </div>
    </div>

    <div v-if="obj.typeid == 2 || obj.typeid == 3">
      <div v-if="obj.typeid == 2">
        <p class="title-label b">图片设置</p>
        <div class="display-flex mt10 ">
        <span class="vertical-center">图片类型：</span>
        <div class="flex-1">
          <n-select v-model:value="obj.imgType" :options="imgTypeList" class="w100" />
        </div>
      </div>
        <div class="mt10">
          <p>选择图片地址：</p>
          <div>
            <div class="img-box vertical-center sz" @click="photoShowModaler = true">
              <i class="iconfont dx-24gl-pictures z9 fz36" v-if="!obj.imgUrl"></i>
              <img :src="obj.imgUrl" v-else class="w100 h100" :style="{
                objectFit: obj.imgXsVal,
                borderRadius: obj.ImagesRoundedCorners + 'px',
              }" />
            </div>
          </div>
        </div>
      </div>
      <div v-if="obj.typeid == 3">
        <p class="title-label b">轮播图片设置</p>
        <div class="mt10">
          <p>选择图片地址：</p>
          <div class="jjnnserr mt10">
            <div class="jjnjxneerwe vertical-center pr" v-for="(item, idx) in obj.imgUrlList" :key="idx">
              <img :src="item" class="w100 h100" :style="{
                objectFit: obj.imgXsVal,
                borderRadius: obj.ImagesRoundedCorners + 'px',
              }" />
              <div class="jnjxeerrwe vertical-center">
                <i class="iconfont dx-shanchu cf fz20 sz" @click="delimgfun(idx)"></i>
              </div>
            </div>
            <div class="jjnjxneerwe vertical-center sz" @click="photoShowModalsan = true">
              <i class="iconfont dx-add z9 fz20 sz"></i>
            </div>
          </div>
        </div>
      </div>

      <div class="mt10">
        <p>图片显示：</p>
        <div class="mt10">
          <n-radio-group v-model:value="obj.imgXsVal" name="radiogroup">
            <n-radio value="cover"> 居中 </n-radio>
            <n-radio value="contain"> 横竖屏铺满 </n-radio>
            <n-radio value="inherit"> 强制拉伸 </n-radio>
          </n-radio-group>
        </div>
      </div>

      <div class="mt10">
        <p>宽度：</p>
        <div class="display-flex mt5">
          <div class="flex-1 pt5">
            <n-slider v-model:value="obj.w" :step="1" :min="0" :max="1200" />
          </div>
          <div class="injhjwertrw ml10">
            <n-input-number v-model:value="obj.w" size="small" />
          </div>
        </div>
      </div>
      <div class="mt10">
        <p>高度：</p>
        <div class="display-flex mt5">
          <div class="flex-1 pt5">
            <n-slider v-model:value="obj.h" :step="1" :min="0" :max="1920" />
          </div>
          <div class="injhjwertrw ml10">
            <n-input-number v-model:value="obj.h" size="small" />
          </div>
        </div>
      </div>
      <div class="mt10">
        <p>与顶部的距离：</p>
        <div class="display-flex mt5">
          <div class="flex-1 pt5">
            <n-slider v-model:value="obj.y" :step="1" :min="0" :max="1920" />
          </div>
          <div class="injhjwertrw ml10">
            <n-input-number v-model:value="obj.y" size="small" />
          </div>
        </div>
      </div>
      <div class="mt10">
        <p>与左边的距离：</p>
        <div class="display-flex mt5">
          <div class="flex-1 pt5">
            <n-slider v-model:value="obj.x" :step="1" :min="0" :max="1920" />
          </div>
          <div class="injhjwertrw ml10">
            <n-input-number v-model:value="obj.x" size="small" />
          </div>
        </div>
      </div>

      <div class="mt10">
        <p>圆角：</p>
        <div class="display-flex mt5">
          <div class="flex-1 pt5">
            <n-slider v-model:value="obj.ImagesRoundedCorners" :step="1" :min="0" :max="200" />
          </div>
          <div class="injhjwertrw ml10">
            <n-input-number v-model:value="obj.ImagesRoundedCorners" size="small" />
          </div>
        </div>
      </div>
      <div class="mt20 display-flex">
        <p class="">边框：</p>
        <n-checkbox-group v-model:value="obj.border" class="mt2">
          <n-space item-style="display: flex;">
            <n-checkbox value="1" label="上" />
            <n-checkbox value="2" label="下" />
            <n-checkbox value="3" label="左" />
            <n-checkbox value="4" label="右" />
          </n-space>
        </n-checkbox-group>

      </div>
      <!-- <div class="mt20">
        <p class="">跳转地址：</p>
        <div>
          <n-input
            v-model:value="obj.href"
            placeholder="跳转链接"
            size="medium"
          />
        </div>
      </div> -->
    </div>

    <div v-if=" obj.typeid == 4||obj.typeid == 5">
      <p class="title-label b">选项设置</p>

      <div class="mt10">
        <n-checkbox v-model:checked="obj.isBlod"> 是否加粗 </n-checkbox>
      </div>

      <div class="mt10">
        <p class="">背景颜色：</p>
        <div>
          <n-color-picker v-model:value="obj.backgroundColor" />
        </div>
      </div>
      <div class="mt10">
        <p>宽度：</p>
        <div class="display-flex mt5">
          <div class="flex-1 pt5">
            <n-slider v-model:value="obj.w" :step="1" :min="0" :max="1200" />
          </div>
          <div class="injhjwertrw ml10">
            <n-input-number v-model:value="obj.w" size="small" />
          </div>
        </div>
      </div>
      <div class="mt10">
        <p>高度：</p>
        <div class="display-flex mt5">
          <div class="flex-1 pt5">
            <n-slider v-model:value="obj.h" :step="1" :min="0" :max="1920" />
          </div>
          <div class="injhjwertrw ml10">
            <n-input-number v-model:value="obj.h" size="small" />
          </div>
        </div>
      </div>
      <div class="mt10">
        <p>与顶部的距离：</p>
        <div class="display-flex mt5">
          <div class="flex-1 pt5">
            <n-slider v-model:value="obj.y" :step="1" :min="0" :max="1920" />
          </div>
          <div class="injhjwertrw ml10">
            <n-input-number v-model:value="obj.y" size="small" />
          </div>
        </div>
      </div>
      <div class="mt10">
        <p>与左边的距离：</p>
        <div class="display-flex mt5">
          <div class="flex-1 pt5">
            <n-slider v-model:value="obj.x" :step="1" :min="0" :max="1920" />
          </div>
          <div class="injhjwertrw ml10">
            <n-input-number v-model:value="obj.x" size="small" />
          </div>
        </div>
      </div>
      <div class="mt10">
        <p class="">内边距：</p>
        <div class="kjbsfsdrte">
          <div>
            <n-input v-model:value="obj.paddingT" placeholder="上" size="medium" />
          </div>
          <div>
            <n-input v-model:value="obj.paddingR" placeholder="右" size="medium" />
          </div>
          <div>
            <n-input v-model:value="obj.paddingB" placeholder="下" size="medium" />
          </div>
          <div>
            <n-input v-model:value="obj.paddingL" placeholder="左" size="medium" />
          </div>
        </div>
      </div>
      <div class="mt20 display-flex">
        <p class="">边框：</p>
        <n-checkbox-group v-model:value="obj.border" class="mt2">
          <n-space item-style="display: flex;">
            <n-checkbox value="1" label="上" />
            <n-checkbox value="2" label="下" />
            <n-checkbox value="3" label="左" />
            <n-checkbox value="4" label="右" />
          </n-space>
        </n-checkbox-group>

      </div>

      <div class="mt20">
        <p>选项内容(逗号隔开为一个选项)</p>

        <n-input v-model:value="obj.option" size="medium" class="mt10" />

      </div>




    </div>

    <n-modal v-model:show="photoShowModaler" preset="card" class="Stock-diagnosis">
      <template #header>
        <div>上传/选择封面</div>
      </template>
      <div>
        <photoGallery @getImg="getImger" types="文书图片"></photoGallery>
      </div>
      <template #action>
        <div class="tr">
          <n-button @click="photoShowModaler = false"> 取消 </n-button>
          <n-button class="ml10" type="info" @click="geturler"> 确定 </n-button>
        </div>
      </template>
    </n-modal>

    <n-modal v-model:show="photoShowModalsan" preset="card" class="Stock-diagnosis">
      <template #header>
        <div>多张图片</div>
      </template>
      <div>
        <MorePictures @getImg="getImgList" types="abb编辑器轮播图"></MorePictures>
      </div>
      <template #action>
        <div class="tr">
          <n-button @click="photoShowModalsan = false"> 取消 </n-button>
          <n-button class="ml10" type="info" @click="getimgData">
            确定
          </n-button>
        </div>
      </template>
    </n-modal>
  </div>
  <div class="Component-list pt30 pd" v-else-if="obj.cls">
    <div>
      <p class="title-label b">设置{{obj.name}}控件高度</p>

      <div class="mt20">
        <p>高度：</p>
        <div class="display-flex mt5">
          <div class="flex-1 pt5">
            <n-slider v-model:value="obj.initH" :step="1" :min="0" :max="1920" />
          </div>
          <div class="injhjwertrw ml10">
            <n-input-number v-model:value="obj.initH" size="small" />
          </div>
        </div>
      </div>
    </div>
  </div>

</template>
<script lang='ts' setup>
import { ref } from "vue";
import photoGallery from "../../../components/util/photoGallery";
import MorePictures from "../../../components/util/MorePictures.vue";

const props = defineProps({
  obj: { type: Object, default: {} },
});
const photoShowModalsan = ref(false);
const textTypeList = ref([
  {
    label: "普通文本",
    value: 0
  }, {
    label: "日期",
    value: 1
  },
  {
    label: "时间",
    value: 2
  },
  {
    label: "打勾",
    value: 3
  },
])
const imgTypeList = ref([
  {
    label: "普通图片",
    value: 0
  }, {
    label: "签名",
    value: 1
  }
])
const photoShowModaler = ref();
let videUrler = "";
const getImger = (data) => {
  videUrler = data;
};
const geturler = () => {
  photoShowModaler.value = false;
  props.obj.imgUrl = videUrler;
};

let imgArr = [];
const getImgList = (data) => {
  imgArr = data;
};
const getimgData = () => {
  photoShowModalsan.value = false;
  props.obj.imgUrlList = imgArr;
};
const delimgfun = (idx) => {
  props.obj.imgUrlList.splice(idx, 1);
};
</script>
<style scoped>
.Component-list {
  position: fixed;
  right: 0;
  top: 0;
  width: 300px;
  height: 100%;
  z-index: 99;
  background: #fff;
  box-shadow: -5px 0px 5px rgba(0, 0, 0, 0.1);
}

.injhjwertrw {
  width: 90px;
}

.img-box {
  width: 150px;
  height: 150px;
  border: 1px dashed #e0e0e0;
  border-radius: 4px;
  margin-top: 10px;
}

.kjbsfsdrte {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(1, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

.jhgbjserer {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(1, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

.jjnnserr {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(1, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

.jjnjxneerwe {
  background: #f8f8f8;
  height: 60px;
  border-radius: 8px;
  overflow: hidden;
}

.jnjxeerrwe {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: none;
}

.jjnjxneerwe:hover .jnjxeerrwe {
  display: flex;
}
</style>